/**
 * Created by sfr on 2017/10/10.
 */
import React from "react";
import { routerRedux } from 'dva/router';
import {connect} from "dva";
import moment from 'moment';
import {Tabs, Flex, List, WhiteSpace, Icon, Progress} from "antd-mobile";
import styles from './myCourse.less'
const empty = require('is-empty');

import new1 from '../../../../assets/infor/new3.jpg';

class MyCourse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  //==生命周期--页面渲染
  render() {
    return (
      <div className='myCourse'>
        {/*tab*/}
        <Tabs
          defaultActiveKey="1"
          animated={true}
          swipeable={false}
          onTabClick={this.handleTabClick}>
          <Tabs.TabPane tab="学习" key="1">
            <div>
              {/*顶部空白，由于tabs固定不变*/}
              <div className={styles.tabsBlank}></div>
              {/*学习第一条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%',overflow: 'hidden',position: 'relative'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                  <div style={{width: '100%',height: '0.35rem', backgroundColor: 'red', position: 'absolute',top: '0.2rem', left: '-0.7rem',textAlign: 'center',transform: 'rotate(-45deg)'}}>
                    <span style={{color: '#f8c400', fontSize: '0.25rem',fontWeight: '600',letterSpacing: '0.05rem'}}>必修</span>
                  </div>
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <Flex justify='start' align='center' style={{width: '100%',marginTop:'0.3rem'}}>
                    <div style={{width: '40%'}}><Progress percent={40} position="normal" /></div>
                    <div style={{width: '20%',marginLeft: '5%',color:'#6eb8ff',fontSize: '0.3rem'}}>{40}%</div>
                  </Flex>
                </div>
              </Flex>
              {/*学习第二条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%',overflow: 'hidden',position: 'relative'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                  <div style={{width: '100%',height: '0.35rem', backgroundColor: 'red', position: 'absolute',top: '0.2rem', left: '-0.7rem',textAlign: 'center',transform: 'rotate(-45deg)'}}>
                    <span style={{color: '#fff', fontSize: '0.25rem',fontWeight: '600',letterSpacing: '0.05rem'}}>选修</span>
                  </div>
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <Flex justify='start' align='center' style={{width: '100%',marginTop:'0.3rem'}}>
                    <div style={{width: '40%'}}><Progress percent={40} position="normal" /></div>
                    <div style={{width: '20%',marginLeft: '5%',color:'#6eb8ff',fontSize: '0.3rem'}}>{40}%</div>
                  </Flex>
                </div>
              </Flex>
              {/*学习第一条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%',overflow: 'hidden',position: 'relative'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                  <div style={{width: '100%',height: '0.35rem', backgroundColor: 'red', position: 'absolute',top: '0.2rem', left: '-0.7rem',textAlign: 'center',transform: 'rotate(-45deg)'}}>
                    <span style={{color: '#f8c400', fontSize: '0.25rem',fontWeight: '600',letterSpacing: '0.05rem'}}>必修</span>
                  </div>
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <Flex justify='start' align='center' style={{width: '100%',marginTop:'0.3rem'}}>
                    <div style={{width: '40%'}}><Progress percent={40} position="normal" /></div>
                    <div style={{width: '20%',marginLeft: '5%',color:'#6eb8ff',fontSize: '0.3rem'}}>{40}%</div>
                  </Flex>
                </div>
              </Flex>
              {/*学习第二条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%',overflow: 'hidden',position: 'relative'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                  <div style={{width: '100%',height: '0.35rem', backgroundColor: 'red', position: 'absolute',top: '0.2rem', left: '-0.7rem',textAlign: 'center',transform: 'rotate(-45deg)'}}>
                    <span style={{color: '#fff', fontSize: '0.25rem',fontWeight: '600',letterSpacing: '0.05rem'}}>选修</span>
                  </div>
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <Flex justify='start' align='center' style={{width: '100%',marginTop:'0.3rem'}}>
                    <div style={{width: '40%'}}><Progress percent={40} position="normal" /></div>
                    <div style={{width: '20%',marginLeft: '5%',color:'#6eb8ff',fontSize: '0.3rem'}}>{40}%</div>
                  </Flex>
                </div>
              </Flex>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="考试" key="2">
            <div>
              {/*顶部空白，由于tabs固定不变*/}
              <div className={styles.tabsBlank}></div>
              {/*学习第一条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <div style={{color:'#999',fontSize:'0.25rem',height: '0.3rem',lineHeight: '0.3rem',marginTop: '0.3rem'}}>
                    <span>最高分：50</span>
                    <span style={{marginLeft:'0.3rem'}}>剩余次数：1</span>
                  </div>
                  <div style={{width: '1rem',height: '1rem',position: 'absolute',bottom: '-0.3rem',right: '0',zIndex:99}}>
                    <Icon type={require('../../../../svgs/mine/myCourse/pass.svg')} size='lg' style={{width: '1rem',height: '1rem'}}/>
                  </div>
                </div>
              </Flex>
              {/*学习第二条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <div style={{color:'#999',fontSize:'0.25rem',height: '0.3rem',lineHeight: '0.3rem',marginTop: '0.3rem'}}>
                    <span>最高分：50</span>
                    <span style={{marginLeft:'0.3rem'}}>剩余次数：1</span>
                  </div>
                  <div style={{width: '0.88rem',height: '0.88rem',position: 'absolute',bottom: '-0.22rem',right: '0',zIndex:99}}>
                    <Icon type={require('../../../../svgs/mine/myCourse/notPass.svg')} size='md' style={{width: '0.88rem',height: '0.88rem'}}/>
                  </div>
                </div>
              </Flex>
              {/*学习第一条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <div style={{color:'#999',fontSize:'0.25rem',height: '0.3rem',lineHeight: '0.3rem',marginTop: '0.3rem'}}>
                    <span>最高分：50</span>
                    <span style={{marginLeft:'0.3rem'}}>剩余次数：1</span>
                  </div>
                  <div style={{width: '1rem',height: '1rem',position: 'absolute',bottom: '-0.3rem',right: '0',zIndex:99}}>
                    <Icon type={require('../../../../svgs/mine/myCourse/pass.svg')} size='lg' style={{width: '1rem',height: '1rem'}}/>
                  </div>
                </div>
              </Flex>
              {/*学习第二条*/}
              <Flex justify='between' align='top' style={{borderTop: '0.01rem solid #ddd',boxSizing: 'border-box',width: '100%',padding: '0.3rem 0.3rem',background: '#fff'}}>
                <div style={{width: '32%'}}>
                  <img
                    src={new1}
                    alt=""
                    style={{width: '100%',height: '1.5rem',verticalAlign: 'top'}} />
                </div>
                <div style={{width: '65%',height: '1.5rem',position: 'relative'}}>
                  <div style={{width: '100%',height:'0.9rem',lineHeight:'0.45rem',fontSize: '0.36rem',letterSpacing: '0.02rem',overflow: 'hidden'}}>
                    庆祝中国人民解放军建军90周年大会在京隆重举行
                  </div>
                  <div style={{color:'#999',fontSize:'0.25rem',height: '0.3rem',lineHeight: '0.3rem',marginTop: '0.3rem'}}>
                    <span>最高分：50</span>
                    <span style={{marginLeft:'0.3rem'}}>剩余次数：1</span>
                  </div>
                  <div style={{width: '0.88rem',height: '0.88rem',position: 'absolute',bottom: '-0.22rem',right: '0',zIndex:99}}>
                    <Icon type={require('../../../../svgs/mine/myCourse/notPass.svg')} size='md' style={{width: '0.88rem',height: '0.88rem'}}/>
                  </div>
                </div>
              </Flex>
            </div>
          </Tabs.TabPane>
          {/*<Tabs.TabPane tab="问答" key="3">*/}
            {/*<div style={{backgroundColor: '#eee'}}>*/}
              {/*/!*顶部空白，由于tabs固定不变*!/*/}
              {/*<div className={styles.tabsBlank}></div>*/}
              {/*/!*问答第一条*!/*/}
              {/*<div style={{marginTop: '0.2rem',padding: '0.3rem',backgroundColor: '#fff'}}>*/}
                {/*<Flex justify='start' align='center'>*/}
                  {/*<div style={{width: '0.8rem',height: '0.8rem'}}>*/}
                    {/*<img src={new1} alt="" style={{width:'100%',height: '100%'}} />*/}
                  {/*</div>*/}
                  {/*<div style={{marginLeft: '0.15rem',fontSize: '0.32rem',color: '#333'}}>*/}
                    {/*李建国*/}
                  {/*</div>*/}
                {/*</Flex>*/}
                {/*<div style={{fontSize: '0.32rem',lineHeight: '0.45rem',color: '#333',fontWeight: 600,paddingTop: '0.1rem',letterSpacing: '0.01rem'}}>*/}
                  {/*支委会的组织委员能兼任纪检委员吗？*/}
                {/*</div>*/}
                {/*<div style={{fontSize: '0.3rem',lineHeight: '0.42rem',color: '#333',paddingTop: '0.1rem',letterSpacing: '0.01rem'}}>*/}
                  {/*住房公积金分单位缴纳部分和个人缴纳部分，我知道*/}
                  {/*住房公积金不纳入党费基数，（《党费工作手册》P*/}
                  {/*31）,同时也知道住房公积金单位缴纳部分…*/}
                {/*</div>*/}
                {/*<div style={{fontSize: '0.28rem',color: '#999',paddingTop: '0.1rem',}}>*/}
                  {/*<span>1位专家浏览</span>*/}
                  {/*<span style={{marginLeft: '0.25rem'}}>234次浏览</span>*/}
                {/*</div>*/}
              {/*</div>*/}
              {/*/!*问答第一条*!/*/}
              {/*<div style={{marginTop: '0.2rem',padding: '0.3rem',backgroundColor: '#fff'}}>*/}
                {/*<Flex justify='start' align='center'>*/}
                  {/*<div style={{width: '0.8rem',height: '0.8rem'}}>*/}
                    {/*<img src={new1} alt="" style={{width:'100%',height: '100%'}} />*/}
                  {/*</div>*/}
                  {/*<div style={{marginLeft: '0.15rem',fontSize: '0.32rem',color: '#333'}}>*/}
                    {/*李建国*/}
                  {/*</div>*/}
                {/*</Flex>*/}
                {/*<div style={{fontSize: '0.32rem',lineHeight: '0.45rem',color: '#333',fontWeight: 600,paddingTop: '0.1rem',letterSpacing: '0.01rem'}}>*/}
                  {/*支委会的组织委员能兼任纪检委员吗？*/}
                {/*</div>*/}
                {/*<div style={{fontSize: '0.3rem',lineHeight: '0.42rem',color: '#333',paddingTop: '0.1rem',letterSpacing: '0.01rem'}}>*/}
                  {/*住房公积金分单位缴纳部分和个人缴纳部分，我知道*/}
                  {/*住房公积金不纳入党费基数，（《党费工作手册》P*/}
                  {/*31）,同时也知道住房公积金单位缴纳部分…*/}
                {/*</div>*/}
                {/*<div style={{fontSize: '0.28rem',color: '#999',paddingTop: '0.1rem',}}>*/}
                  {/*<span>1位专家浏览</span>*/}
                  {/*<span style={{marginLeft: '0.25rem'}}>234次浏览</span>*/}
                {/*</div>*/}
              {/*</div>*/}
              {/*/!*问答第一条*!/*/}
              {/*<div style={{marginTop: '0.2rem',padding: '0.3rem',backgroundColor: '#fff'}}>*/}
                {/*<Flex justify='start' align='center'>*/}
                  {/*<div style={{width: '0.8rem',height: '0.8rem'}}>*/}
                    {/*<img src={new1} alt="" style={{width:'100%',height: '100%'}} />*/}
                  {/*</div>*/}
                  {/*<div style={{marginLeft: '0.15rem',fontSize: '0.32rem',color: '#333'}}>*/}
                    {/*李建国*/}
                  {/*</div>*/}
                {/*</Flex>*/}
                {/*<div style={{fontSize: '0.32rem',lineHeight: '0.45rem',color: '#333',fontWeight: 600,paddingTop: '0.1rem',letterSpacing: '0.01rem'}}>*/}
                  {/*支委会的组织委员能兼任纪检委员吗？*/}
                {/*</div>*/}
                {/*<div style={{fontSize: '0.3rem',lineHeight: '0.42rem',color: '#333',paddingTop: '0.1rem',letterSpacing: '0.01rem'}}>*/}
                  {/*住房公积金分单位缴纳部分和个人缴纳部分，我知道*/}
                  {/*住房公积金不纳入党费基数，（《党费工作手册》P*/}
                  {/*31）,同时也知道住房公积金单位缴纳部分…*/}
                {/*</div>*/}
                {/*<div style={{fontSize: '0.28rem',color: '#999',paddingTop: '0.1rem',}}>*/}
                  {/*<span>1位专家浏览</span>*/}
                  {/*<span style={{marginLeft: '0.25rem'}}>234次浏览</span>*/}
                {/*</div>*/}
              {/*</div>*/}
            {/*</div>*/}
          {/*</Tabs.TabPane>*/}
        </Tabs>
      </div>
    );
  }
  //==组件所有函数
  //table点击函数
  handleTabClick = (key) => {
    switch (key) {
      case '1': //学习
        this.props.dispatch({
          type: 'mycourse/study',
          payload: {}
        });
        break;
      case '2': //考试
        this.props.dispatch({
          type: 'mycourse/examination',
          payload: {}
        });
        break;
    }
  }
}

function mapStateToProps({ mycourse }){
  return {
    mycourse
  };
}
export default connect(mapStateToProps)(MyCourse);


